<style>
  #img-container>img{
    width: 100%;
  }
</style>
<header class="mui-bar mui-bar-nav header">
  <h1 class="mui-title">上传转账截图</h1>
</header>
<div class="mui-content">
  <div class="pay-iphone">
    请在转账备注中附带订单号
  </div>
  <div class="logo-container">
    <img src="assets/images/logo.jpg">
  </div>
  <div class="pay-box">
    <input type="text" value="<%= inv_no%>" id="order_no">
    <input type="button" value="点击复制订单号" class="pay-box-btn">
  </div>
  <div class="account_info">
    <p>Account Name: EWE Canberra PTY LTD</p>
    <p>BSB: 032778</p>
    <p>Account Number: 521866</p>
  </div>
  <input type="button" class="login-btn" value="点击上传转账截图">
  <div id="img-container">

  </div>
</div>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
<script>
  $(function () {
    $('.pay-box-btn').click(function () {
      var order_info = document.getElementById('order_no');
      order_info.select();
      document.execCommand('Copy');
      mui.toast('订单号复制成功！');
    })
  })
</script>
<script>
  $(function () {
    var url = window.location.href;
    $.post('/api/jssdk/signature/', {url: url}, function (call, stat) {
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: 'wxbc675391baa7ae28', // 必填，公众号的唯一标识
        timestamp: call.timestamp, // 必填，生成签名的时间戳
        nonceStr: call.noncestr, // 必填，生成签名的随机串
        signature: call.signature,// 必填，签名，见附录1
        jsApiList: ['chooseImage', 'uploadImage', 'previewImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      });
    })
  })
</script>
<script>
  $('.login-btn').click(function () {
    wx.chooseImage({
            count: 1,
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success: function (res) {
              var localIds = res.localIds;
              $('#img-container').append('<img src="'+localIds+'">');
              wx.uploadImage({
                localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                isShowProgressTips: 1, // 默认为1，显示进度提示
                success: function (res) {
                  var serverId = res.serverId; // 返回图片的服务器端ID
                  var order_id = '<%= order_id%>';
                  var payment = '<%= payment%>';
                  $.get('/api/transfer/media/?media_id='+serverId+'&order_id='+order_id+'&payment='+payment, function (call) {
                    if (call == 'success') {
                        mui.toast('上传转账截图成功！');
                        window.location.href = '/users/account/orders/';
                    }
                  })
                }
              });
            }
          });
  })
</script>
